<template>
  <div class="page-view">
    <div class="class-info-top">
      <div
        class="class-name"
      >
        {{ curSectionName }}
      </div>

      <div
        class="back-home"
        @click="goHome"
      >
        返回首页
      </div>
    </div>
    <div class="video-class">
      <TcPlayer
        v-if="curSectionId && sectionList"
        :class-info="{}"
        :section-info="sectionInfo"
        :is-free-course="true"
      />
    </div>
    <div class="tabs-view">
      <van-tabs
        color="#03C9BB"
        title-active-color="#333333"
        :line-height="3"
        :line-width="activeBarWidth"
      >
        <van-tab title="视频列表">
          <div
            v-if="sectionList.length > 0"
            class="section-tab"
          >
            <div
              v-for="item in sectionList"
              :key="item.ChapterId"
              class="section-item"
              @click="onSection(item)"
            >
              <div
                class="section-name"
                :class="{'section-name-blue': item.ChapterId === curSectionId}"
              >
                <div>{{ item.Name }}</div>
                <div class="status-btn">
                  {{ item.StatusStr }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-else-if="sectionList.length <= 0 && isFinished"
            class="no-section"
          >
            <NoData>暂时没有视频~</NoData>
          </div>
        </van-tab>
        <van-tab title="课程介绍">
          <div class="intro-course">
            <span class="info-title-bold">
              课程<span class="info-title">
                介绍
              </span>
            </span>
            <div
              v-if="courseInfo"
              class="info-content"
            >
              {{ courseInfo }}
            </div>
            <NoData v-else>
              暂时没有课程介绍~
            </NoData>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    NoData: () => import('components/Class/NoData.vue'),
    TcPlayer: () => import('components/Video/Video.vue'),
  },
  data () {
    return {
      activeBarWidth: Math.floor((document.documentElement!.clientWidth - 46) / 2),
      courseId: this.$route.query.courseId,
      packageId: this.$route.query.packageId,
      title: this.$route.query.className,
      courseInfo: '',
      sectionList: [],
      PageNum: 1,
      PageSize: 12,
      curSectionId: '',
      curSectionName: '',
      isFinished: false,
      sectionInfo: {
        CourseImg: this.$route.query.courseImg,
        courseId: this.$route.query.courseId,
        packageId: this.$route.query.packageId,
      },
    }
  },
  created () {
    this.getFreeCourseInfo()
  },
  methods: {
    // 获取免费课试听列表和课程介绍
    getFreeCourseInfo () {
      return this.$axios({
        url: 'ytjysite/ECourse/GetModelDetailList',
        data: {
          CourseId: this.courseId,
        },
      }).then(res => {
        let index = 0
        if (res.Items.length > 0) {
          if (!this.$route.query.activeVideoId) {
            this.curSectionId = res.Items[0].ChapterId
            this.curSectionName = res.Items[0].Name
          } else {
            for (let i = 0; i < res.Items.length; i++) {
              if (res.Items[i].ChapterId === this.$route.query.activeVideoId) {
                this.curSectionId = res.Items[i].ChapterId
                this.curSectionName = res.Items[i].Name
                index = i
              }
            }
          }
        }
        this.$set(this.$data, 'sectionInfo', {
          ...this.sectionInfo,
          ...res.Items[index],
          SectionId: this.curSectionId })
        this.$set(this.$data, 'sectionList', res.Items)
        this.$set(this.$data, 'courseInfo', res.Description)
        this.isFinished = true
      })
    },
    onSection (item: any) {
      console.log('curSectionId', item)
      this.curSectionId = item.ChapterId
      this.curSectionName = item.Name
      this.$set(this.$data, 'sectionInfo', {
        ...this.sectionInfo, ...item, SectionId: item.ChapterId })
    },
    goHome () {
      this.$router.replace({ name: 'home' })
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.class-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 94px;
  background-color: #fff;
}
.back-home {
  width: 120px;
  font-size: 28px;
  color: #00CCCC;
}
.class-name {
  line-height: 94px;
  width: calc(100% - 200px);
  padding-right: 30px;
  font-size: 36px;
  color: #333333;
  @include ellipsis;
}
.video-class {
  height: 393px;
  text-align: center;
}
.tabs-view {
  flex: 1;
  overflow-y: scroll;
    /deep/ {
      .van-ellipsis {
        font-size: 32px;
      }
      .van-tabs__line {
        border-radius: 0px !important;
      }
      .van-tabs--line {
        height: 100%;
      }
      .van-tabs__content {
        height: 100%;
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
      }
    }
  }
.section-tab {
  background: #FFF;
}
.section-item {
  margin-left: 24px;
  height: 110px;
  line-height: 110px;
  font-size: 32px;
  // border-bottom: 1px solid #E9E9E9;
  @include px1border;
}
.section-name, .section-name-blue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  width: 100%;
  @include ellipsis;
}
.section-name-blue {
  color: $primary-web;
}
.status-btn {
  font-size: 24px;
  color: #333;
  margin-right: 40px;
  width: 140px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  @include px1border(all, #eaeaea);
}
.intro-course {
  padding: 30px 24px;
}
.intro-course-teacher {
  padding: 30px 24px;
  border-top: 20px solid #F6F6F6;
}
.info-title, .info-title-bold {
  display: flex;
  font-size: 32px;
  color: #333;
  font-weight: 600;
}
.info-title {
  font-weight: 400;
}
.info-content {
  width: 100%;
  margin-top: 30px;
  font-size: 28px;
  color: #4B515E;
  line-height: 48px;
  text-align: left;
}
.intro-teacher {
  text-align: center;
}
.teacher-head {
  margin-top: 10px;
  width: 86px;
  height: 86px;
}
.name {
  font-size: 28px;
  display: block;
  color: #333;
  margin-top: 10px;
}
.no-section {
  font-size: 32px;
  padding-top: 100px;
  text-align: center;
}
.no-text {
  font-size: 32px;
  padding: 30px 0;
  text-align: center;
}
// .more-class {
//   height: 120px;
//   text-align: center;
//   line-height: 120px;
//   color: $primary-web;
//   font-size: 28px;
// }
.in-class-list {
  margin: 40px 30px 0;
  font-size: 28px;
}
.in-class-title {
  margin-bottom: 20px;
  font-size: 30px;
}
.in-class-item {
  padding: 20px 0;
  + .in-class-item {
    @include px1border(top);
  }
}

.intro-course {
  padding: 30px 24px;
}
.info-title, .info-title-bold {
  display: flex;
  font-size: 32px;
  color: #333;
  font-weight: 600;
}
.info-title {
  font-weight: 400;
}
.info-content {
  width: 100%;
  margin-top: 30px;
  font-size: 28px;
  color: #4B515E;
  line-height: 48px;
  text-align: left;
}
</style>
